<template>
	<view>
		<u-popup :show="merchantStoreShow" @close="closeMerchantStore" mode="center" :closeable="true" :safeAreaInsetBottom="false"
			:customStyle="{width: '500rpx', padding: '30rpx'}" round="20rpx">
			<view class="content">
				<view class="header">选择场地</view>
				<view class="merchant" @click="show=true">
					<u--input placeholder="请选择场地" disabled disabledColor="#ffffff" border="none" suffixIcon="arrow-down"
						v-model="merchantStore.storeName"></u--input>
				</view>

				<view class="footer">
					<view class="cancel" @click="closeMerchantStore">取消</view>
					<view class="confirm" @click="submit">确定</view>
				</view>
			</view>

			<u-picker :show="show" :columns="merchantStoreList" keyName="storeName" :closeOnClickOverlay="true"
				@confirm="selectMerchantStore" @cancel="show=false" @close="show=false"></u-picker>
		</u-popup>

	</view>

</template>

<script>
	export default {
		name: "merchant-store-select",
		data() {
			return {
				show: false,
				merchantStoreShow: false,
				merchantStoreList: [
					[]
				],
				merchantStoreId: 0,
				merchantStore: {
					id: 0,
					storeName: '',
				}
			}
		},
    created(){
      this.findAllMerchantStoreByUserId();
    },
		methods: {
			findAllMerchantStoreByUserId() {
				this.$api('merchantStore.findAllMerchantStoreByUserId', null)
					.then(res => {
						if (res.status == 0) {
							// console.log(res)
							this.merchantStoreList[0] = res.data;
						} else {
							uni.hideLoading();
							this.$helpers.toast('请求数据失败:' + res.data.msg);
						}
					})
			},

			showMerchantStore() {
        if (this.merchantStoreList[0].length > 1){
          this.merchantStoreShow = true;
        } else {
          this.$emit("selectBatchOperation", this.merchantStoreList[0][0]);
        }
			},
			closeMerchantStore() {
				this.merchantStore = {};
				this.merchantStoreShow = false;
			},

			submit() {
				if (this.merchantStore.id == 0 || this.merchantStore.name == '') {
					this.$helpers.toast('请选择场地');
					return false;
				}
				this.$emit("selectBatchOperation", this.merchantStore);
				this.closeMerchantStore();
			},

			selectMerchantStore(e) {
				// console.log(e.value[0]);
				this.merchantStore.id = e.value[0].id;
				this.merchantStore.storeName = e.value[0].storeName;
				this.show = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 30rpx 30rpx 0 30rpx;

		.header {
			text-align: center;
		}

		.merchant {
			margin-top: 30rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			border: 1rpx solid #606266;

			&:active {
				border: 1rpx solid #60626680;
			}
		}

		.footer {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;

			.cancel {
				flex: 1;
				text-align: center;
				padding: 20rpx 0;
				
				&:active {
          background-color: #00000020;
				}
			}

			.confirm {
				flex: 1;
				text-align: center;
				padding: 20rpx 0;
				color: $u-primary;
				
				&:active {
          background-color: #00000020;
				}
			}
		}

	}
</style>
